<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>contextmenu.js - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <input type="text" id="nav-search" placeholder="Search" />
    
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="openBSE.BrowserNotSupportError.html">BrowserNotSupportError</a></li><li><a href="openBSE.Contextmenu.html">Contextmenu</a><ul class='methods'><li data-type='method' style='display: none;'><a href="openBSE.Contextmenu.html#closeContextmenu">closeContextmenu</a></li><li data-type='method' style='display: none;'><a href="openBSE.Contextmenu.html#getBulletScreenEvent">getBulletScreenEvent</a></li><li data-type='method' style='display: none;'><a href="openBSE.Contextmenu.html#getContextmenuState">getContextmenuState</a></li></ul></li><li><a href="openBSE.GeneralEngine.html">GeneralEngine</a><ul class='methods'><li data-type='method' style='display: none;'><a href="openBSE.GeneralEngine.html#add">add</a></li><li data-type='method' style='display: none;'><a href="openBSE.GeneralEngine.html#bind">bind</a></li><li data-type='method' style='display: none;'><a href="openBSE.GeneralEngine.html#cleanBuffer">cleanBuffer</a></li><li data-type='method' style='display: none;'><a href="openBSE.GeneralEngine.html#cleanScreen">cleanScreen</a></li><li data-type='method' style='display: none;'><a href="openBSE.GeneralEngine.html#pause">pause</a></li><li data-type='method' style='display: none;'><a href="openBSE.GeneralEngine.html#play">play</a></li><li data-type='method' style='display: none;'><a href="openBSE.GeneralEngine.html#playAllBulletScreens">playAllBulletScreens</a></li><li data-type='method' style='display: none;'><a href="openBSE.GeneralEngine.html#stop">stop</a></li><li data-type='method' style='display: none;'><a href="openBSE.GeneralEngine.html#unbind">unbind</a></li></ul></li></ul><h3>Events</h3><ul><li><a href="openBSE.GeneralEngine.html#event:click">click</a></li><li><a href="openBSE.GeneralEngine.html#event:contextmenu">contextmenu</a></li><li><a href="openBSE.GeneralEngine.html#event:mouseenter">mouseenter</a></li><li><a href="openBSE.GeneralEngine.html#event:mouseleave">mouseleave</a></li></ul><h3>Namespaces</h3><ul><li><a href="openBSE.html">openBSE</a><ul class='methods'><li data-type='method' style='display: none;'><a href="openBSE.html#.getVersion">getVersion</a></li></ul></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">contextmenu.js</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>import Resources from './lib/resources'
/**
 * 上下文菜单类
 * @alias openBSE.Contextmenu
 * @description 上下文菜单对象。用于实现一个弹幕上下文菜单。
 */
class Contextmenu {
    /**
     * 创建弹幕引擎对象的上下文菜单。
     * @param {openBSE.BulletScreenEngine} generalEngine - 弹幕引擎对象：一个弹幕 {@link openBSE.BulletScreenEngine} 对象。要添加上下文菜单的
     * @param {Element} element - 上下文菜单元素：当显示上下文菜单时要显示的 div 。有关 Element 接口的信息请参阅MDN [Element]{@link https://developer.mozilla.org/zh-CN/docs/Web/API/Element} 。
     * @param {number} [layer=10] - 弹幕层级：当显示上下文菜单或鼠标指向弹幕时弹幕要移动到的层级。有关弹幕层级的详细说明请参阅 {@link openBSE~options} 结构。
     * @param {boolean} [pause=true] - 是否暂停：当鼠标指向弹幕或单开上下文菜单时弹幕是否暂停移动/播放。
     */
    constructor(generalEngine, element, layer = 10, pause = true) {
        if (
            typeof generalEngine != 'object' ||
            typeof element != 'object' ||
            typeof pause != 'boolean' ||
            (typeof layer != 'number' &amp;&amp; layer != null)
        ) throw new TypeError(Resources.PARAMETERS_TYPE_ERROR);

        element.bulletScreenEvent = null;

        let _getContextmenuState = () => element.style.display != 'none';
        /**
         * 获取上下文菜单的状态
         * @function
         * @returns {boolean} 指示上下文菜单是否正处于激活/显示状态。
         */
        this.getContextmenuState = _getContextmenuState;
        /**
         * 获取激活上下文菜单的弹幕的弹幕事件结构
         * @returns {openBSE~BulletScreenEvent} 弹幕事件结构：一个 {@link openBSE~BulletScreenEvent} 结构。
         */
        this.getBulletScreenEvent = () => element.bulletScreenEvent;
        /**
         * 关闭上下文菜单：如果当前上下文菜单正处于激活/显示状态则立即关闭。
         */
        this.closeContextmenu = () => {
            if (_getContextmenuState()) {
                element.style.display = 'none';
                if (pause) element.bulletScreenEvent.setPlayState(true);
                element.bulletScreenEvent.setBulletScreen({ _contextmenu: false }, false);
                element.bulletScreenEvent = null;
            }
        }

        element.style.position = 'fixed';
        element.style.display = 'none';
        element.oncontextmenu = () => false;

        let isParent = (element, parentElement) => {
            do if (element === parentElement) return true;
            while(document != (element = element.parentNode))
            return false;
        }

        let _closeContextmenu = function (e) {
            if (_getContextmenuState() &amp;&amp; !isParent(e.target,element)) {
                element.style.display = 'none';
                if (pause) element.bulletScreenEvent.setPlayState(true);
                element.bulletScreenEvent.setBulletScreen({ _contextmenu: false }, false);
                element.bulletScreenEvent = null;
                if (e.type === 'click') e.stopPropagation();
            }
        }
        window.addEventListener('click', _closeContextmenu, true);
        window.addEventListener('contextmenu', _closeContextmenu, true);
        window.addEventListener('scroll', _closeContextmenu, true);

        generalEngine.bind('contextmenu', function (e) {
            e.setBulletScreen({ layer: layer, _contextmenu: true }, layer != null);
            if (pause) e.setPlayState(false);
            element.style.display = '';
            let top = e.clientY, left = e.clientX;
            if (top + element.clientHeight > document.documentElement.clientHeight) top -= element.clientHeight;
            if (left + element.clientWidth > document.documentElement.clientWidth) left -= element.clientWidth;
            element.style.top = `${top}px`;
            element.style.left = `${left}px`;
            element.bulletScreenEvent = e;
        });

        generalEngine.bind('mouseenter', function (e) {
            if (layer != null) e.setBulletScreen({ layer: layer }, true);
            if (pause) e.setPlayState(false);
        });

        generalEngine.bind('mouseleave', function (e) {
            if (!e.getBulletScreen()._contextmenu &amp;&amp; pause) e.setPlayState(true);
        });
    }
}
export default Contextmenu
</code></pre>
        </article>
    </section>




    
    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.5</a> on Wed Sep 09 2020 06:20:13 GMT+0000 (Coordinated Universal Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>

<script src="scripts/search.js" defer></script>


<script src="scripts/collapse.js" defer></script>


</body>
</html>
